<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-input
          placeholder="请输入内容"
          v-model.trim="todoText"
          @keyup.enter="createTodo"
        />
      </el-col>
      <el-col :span="8">
        <el-button class="create-btn" type="primary" @click="createTodo">创建</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "TodoInput",
  data() {
    return {
      todoText: '',
    }
  },
  methods: {
    createTodo() {
      if (this.todoText.length !== 0) {
        // 自定义方法，子组件向父组件发送通知
        this.$emit('emit-todo', this.todoText)
        this.todoText = ''
      } else {
        alert('内容不能为空')
      }
    }
  }
}
</script>

<style scoped>
.create-btn {
  width: 100%;
}
</style>